<extend name="Layout:layout_dialog" />
<block name="head_after">
    <style type="text/css">
        .tree .prefix { display:inline-block; border-bottom:dotted 1px #AAA; width:2em; margin-right:3px;}
        .tree ul ul .prefix { width:4em;}
        .tree ul ul ul .prefix { width:6em;}
        #chkall { vertical-align: middle; margin-right: 5px;}
        #reset { margin-left:10px;}
        .tree-box {height: 300px; width:350px; overflow-y: scroll; margin: 5px 0px 10px 0px; padding-top:5px; border-top: dotted 1px #CCC;}
    </style>
</block>
<block name="body_main">    
    <div><input type="checkbox" id="chkall"  />批量勾选 <a href="#" id="reset">[重置]</a></div>
    <form class="xsui-form" method="post" action="{:U('role_permission_edit_save')}">
        <div class="tree-box">
            <ul class="tree">
                <foreach name="tree" item="vo">
                    <li><input type="checkbox" name="id[]" value="{$vo.id}" title="{$vo.id}" />{$vo.title}
                        <ul>
                            <foreach name="vo['children']" item="vo2">
                                <li><i class="prefix"></i><input type="checkbox" name="id[]" value="{$vo2.id}" title="{$vo2.id}" />{$vo2.title}
                                    <ul>
                                        <foreach name="vo2['children']" item="vo3">
                                            <li><i class="prefix"></i><input type="checkbox" name="id[]" value="{$vo3.id}" title="{$vo3.id}" />{$vo3.title}
                                                <ul>
                                                    <foreach name="vo3['children']" item="vo4">
                                                        <li><i class="prefix"></i><input type="checkbox" name="id[]" value="{$vo4.id}" title="{$vo4.id}" />{$vo4.title}</li>
                                                    </foreach>
                                                </ul>
                                            </li>
                                        </foreach>
                                    </ul>
                                </li>
                            </foreach>
                        </ul>
                    </li>
                </foreach>
            </ul>
        </div>
        <input type="hidden" name="role_id" value="{$role_id}" />
        <input type="hidden" id="ids" value="{$ids}" />
        <button type="submit" class="ui-state-default"><i class="fa fa-save"></i>保存</button>
        <button type="reset" class="ui-state-default">重置</button>
    </form>
</block>
<block name="body_after">
    <script type="text/javascript">
        $(function () {
            // 重置按钮
            $('#reset').click(function () {
                $('[type="reset"]').trigger('click');
                auto_check();
                return false;
            })
            auto_check();
            // 批量勾选
            $('#chkall').click(function () {
                $('form :checkbox').prop('checked', $(this).prop('checked'));
            })
            // 层级自动勾选
            /*
            $('.tree :checkbox').click(function () {
                var $chkbox = $(this);
                var state = $chkbox.prop('checked');
                // 自动勾选所有子级
                $chkbox.parent().find(':checkbox').prop('checked', state);
            });
            */

        });
        // 选中值 2016-1-14
        function auto_check() {
            var ids = $('#ids').val();
            if (ids) {
                var aids = ids.split(',');
                $(aids).each(function () {
                    $('input[value="' + this + '"]').prop('checked', true);
                })
            }
        }
    </script>
</block>